<template>
  <div class="show">
     <button @click="isShow = !isShow">显示/隐藏</button>
     <!-- 定义name属性即让动画执行时也要用到这个name值  appear值为true则渲染dom时就加入动画效果-->
     <transition name="see" appear>
        <h1 v-show="isShow">su liang</h1>
     </transition>
  </div>
</template>

<script>
export default {
    name:"Test",
    data(){
        return {
            isShow:'true'
        }
    }
}
</script>

<style>
    .show h1{
        background-color: lightgreen;
    }

    /* 如果transition定义了name属性 在这里用name值 */
    .see-enter-active{
        animation: su 1s;
    }
    .see-leave-active{
        animation: su 1s reverse;
    }
    @keyframes su {
        from{
            transform: translateX(-100%);
        }to{
            transform: translateX(0px);
        }
    }
</style>